<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>类型模板管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../plugins/select2/select2.css" />
    <link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
    <script src="../plugins/select2/select2.min.js" type="text/javascript"></script>

	<script>
		//数据查询 拼接
		$(function () {
			$.post("/typeTemplate/listTypeTemplate",function (result) {
				console.log(result);
				let str='';
				$(result.data).each(function (i,e) {
					str+='<tr>'
					str+='<td><input value="'+e.id+'" name="ids" type="checkbox"></td>'
					str+='<td>'+e.id+'</td>'
					str+=' <td>'+e.name+'</td>'
					let brandIds = JSON.parse(e.brandIds);
					var brand = '';
					$(brandIds).each(function (i1,e1) {
						brand+=e1.text+',';
					})
					brand = brand.substring(0,brand.length-1);
					str+='<td>'+brand+'</td>'
					let specIds = JSON.parse(e.specIds);
					var spec = '';
					$(specIds).each(function (i1,e1) {
						spec+=e1.text+',';
					})
					spec = spec.substring(0,spec.length-1);
					str+=' <td>'+spec+'</td>'

					let customAttributeItems = JSON.parse(e.customAttributeItems)
					var custom = '';
					$(customAttributeItems).each(function (i2,e2) {
						custom+=e2.text+',';
					})
					custom = custom.substring(0,custom.length-1);
					str+='<td>'+custom+'</td>'
					str+='<td>'
					str+='<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#updateModal" onclick="toUpdateTypeTemplate('+e.id+')">修改</button>'
					str+='</td>'
					str+='</tr>'
				})
				$("#typeTemplateTbody").html(str)
			})
		})
	</script>
</head>

<body class="hold-transition skin-red sidebar-mini" >
  <!-- .box-body -->
                    <div class="box-header with-border">
                        <h3 class="box-title">商品类型模板管理</h3>
                    </div>

                    <div class="box-body">

                        <!-- 数据表格 -->
                        <div class="table-box">

                            <!--工具栏-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
                                        <button type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o" onclick="deleteBrand()"></i> 删除</button>
                                       
                                        <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
                                    </div>
                                </div>
                            </div>
                            <div class="box-tools pull-right">
                                <div class="has-feedback">
							                  分类模板名称：<input  >									
									<button class="btn btn-default">查询</button>                                    
                                </div>
                            </div>
                            <!--工具栏/-->

			                  <!--数据列表-->
			                  <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
			                      <thead>
			                          <tr>
			                              <th class="" style="padding-right:0px">
			                                  <input id="selall" type="checkbox" class="icheckbox_square-blue">
			                              </th> 
										  <th class="sorting_asc">模板ID</th>
									      <th class="sorting">分类模板名称</th>
									      <th class="sorting">关联品牌</th>
									      <th class="sorting">关联规格</th>									     
									      <th class="sorting">扩展属性</th>													     						
					                      <th class="text-center">操作</th>
			                          </tr>
			                      </thead>
			                      <tbody id="typeTemplateTbody">
			                         <!-- <tr>
			                              <td><input  type="checkbox"></td>			                              
				                          <td>1</td>
									      <td>手机</td>
									      <td>联想,华为,中兴</td>
									      <td>网络制式</td>									 
									      <td></td>		                                                                  
		                                  <td class="text-center">                                           
		                                 	  <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>                                           
		                                  </td>
			                          </tr>
									  <tr>
			                              <td><input  type="checkbox"></td>			                              
				                          <td>2</td>
									      <td>服装</td>
									      <td>七匹狼,雅戈尔</td>
									      <td>服装尺码</td>									 
									      <td></td>		                                                                  
		                                  <td class="text-center">                                           
		                                 	  <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" >修改</button>                                           
		                                  </td>
			                          </tr>-->
			                      </tbody>
			                  </table>
			                  <!--数据列表/-->                        
							  
							 
                        </div>
                        <!-- 数据表格 /-->
                        
                        
                        
                        
                     </div>
                    <!-- /.box-body -->
                    
	           
					    
                                
<!-- 添加方法 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">商品类型模板编辑</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped"  width="800px">
		      	<tr>
		      		<td>商品类型</td>
		      		<td><input  class="form-control" placeholder="商品类型" name="name" id="name">  </td>
		      	</tr>			   
		      	<tr>
		      		<td>关联品牌</td>
		      		<td>
						<select id="brand" name="brand" multiple style="width: 100%">
							<option th:each="brand : ${listBrand}" th:value="${brand.id}">[[${brand.name}]]</option>
						</select>
		      		</td>
		      	</tr>
		      	<tr>
		      		<td>关联规格</td>
		      		<td>
						<select id="specification" name="specification" multiple style="width: 100%">
							<option th:each="specification : ${listSpecification}" th:value="${specification.id}">[[${specification.specName}]]</option>
						</select>
		      		</td>
		      	</tr>	
		      	
		      	<tr>
		      		<td>扩展属性</td>
		      		<td>
		      			<div class="btn-group">
                             <button type="button" class="btn btn-default" title="新增扩展属性" onclick="insertNode()"><i class="fa fa-file-o"></i> 新增扩展属性</button>
                                                                    
                        </div>
						<table class="table table-bordered table-striped"  width="800px">
							<thead>
								<tr>
								    <td><input type="checkbox" class="icheckbox_square-blue"></td>
									<td>属性名称</td>									
									<td>操作</td>
								</tr>
							</thead>
							<tbody id="customAttributeItemsTbody">
								<tr>
									<td><input type="checkbox" class="icheckbox_square-blue" ></td>
									<td><input class="form-control" placeholder="属性名称" ></td>
									<td><button type="button" class="btn btn-default" title="删除"  onclick="deleteNode(this)"><i class="fa fa-trash-o"></i> 删除</button></td>
								</tr>
								<!--<tr>
									<td><input type="checkbox" class="icheckbox_square-blue" ></td>
									<td><input class="form-control" placeholder="属性名称" ></td>
									<td><button type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button></td>
								</tr>-->
							</tbody>
						</table>	
           
		      		</td>
		      	</tr>	
		      	      
			 </table>				
			
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="insertTypeTemplate()">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>




  <!-- 修改方法 -->
  <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog" >
		  <div class="modal-content">
			  <div class="modal-header">
				  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				  <h3 id="myModalLabel">商品类型模板编辑</h3>
			  </div>
			  <div class="modal-body">

				  <table class="table table-bordered table-striped"  width="800px" id="updateTypeTemplateEcho">
					  <tr id="nameEcho">
						 <!-- <td>商品类型</td>
						  <td><input  class="form-control" placeholder="商品类型" name="name" id="name">  </td>-->
					  </tr>
					  <tr>
						  <td>关联品牌</td>
						  <td>
							  <select id="updateBrand" name="updateBrand" multiple style="width: 100%">
								  <option th:each="brand : ${listBrand}" th:value="${brand.id}">[[${brand.name}]]</option>
							  </select>
						  </td>
					  </tr>
					  <tr>
						  <td>关联规格</td>
						  <td>
							  <select id="updateSpecification" name="updateSpecification" multiple style="width: 100%">
								  <option th:each="specification : ${listSpecification}" th:value="${specification.id}">[[${specification.specName}]]</option>
							  </select>
						  </td>
					  </tr>

					  <tr>
						  <td>扩展属性</td>
						  <td>
							  <div class="btn-group">
								  <button type="button" class="btn btn-default" title="新增扩展属性" onclick="insertNode()"><i class="fa fa-file-o"></i> 新增扩展属性</button>

							  </div>
							  <table class="table table-bordered table-striped"  width="800px">
								  <thead>
								  <tr>
									  <td><input type="checkbox" class="icheckbox_square-blue"></td>
									  <td>属性名称</td>
									  <td>操作</td>
								  </tr>
								  </thead>
								  <tbody id="updateCustomAttributeItemsTbody">
								  <!--<tr>
									  <td><input type="checkbox" class="icheckbox_square-blue" ></td>
									  <td><input class="form-control" placeholder="属性名称" ></td>
									  <td><button type="button" class="btn btn-default" title="删除"  onclick="deleteNode(this)"><i class="fa fa-trash-o"></i> 删除</button></td>
								  </tr>
								  <tr>
                                      <td><input type="checkbox" class="icheckbox_square-blue" ></td>
                                      <td><input class="form-control" placeholder="属性名称" ></td>
                                      <td><button type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button></td>
                                  </tr>-->
								  </tbody>
							  </table>

						  </td>
					  </tr>
				  </table>

			  </div>
			  <div class="modal-footer">
				  <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="updateTypeTemplate()">保存</button>
				  <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			  </div>
		  </div>
	  </div>
  </div>
</body>
	<script>
		$(function () {
			$("#brand").select2();
			$("#specification").select2();
			$("#updateBrand").select2();
			$("#updateSpecification").select2();
		})

		//添加方法 添加规格属性选项
		function insertNode() {
			var putTr = document.createElement("tr")
			let str='<td><input type="checkbox" class="icheckbox_square-blue" ></td>'
			str+='<td><input class="form-control" placeholder="属性名称" ></td>'
			str+='<td><button type="button" class="btn btn-default" title="删除" onclick="deleteNode(this)"><i class="fa fa-trash-o"></i> 删除</button></td>'
			putTr.innerHTML= str;
			document.getElementById("customAttributeItemsTbody").appendChild(putTr)
		}
		//添加规格方法页面 删除规格选项
		function deleteNode(obj) {
			if(confirm("确定要删除么")){
				document.getElementById("customAttributeItemsTbody").removeChild(obj.parentNode.parentNode);
			}
		}

		//修改方法 添加规格属性选项
		function  updateInsertNode() {
			var putTr = document.createElement("tr")
			let str='<td><input type="checkbox" class="icheckbox_square-blue" ></td>'
			str+='<td><input class="form-control" placeholder="属性名称" ></td>'
			str+='<td><button type="button" class="btn btn-default" title="删除" onclick="deleteNode(this)"><i class="fa fa-trash-o"></i> 删除</button></td>'
			putTr.innerHTML= str;
			document.getElementById("updateCustomAttributeItemsTbody").appendChild(putTr)
		}
		//修改方法 删除规格属性选项
		function updateDeleteNode(obj) {
			if(confirm("确定要删除么")){
				document.getElementById("updateCustomAttributeItemsTbody").removeChild(obj.parentNode.parentNode);
			}
		}


		//添加方法
		function insertTypeTemplate() {
			var brandData = $("#brand").select2("data")
			console.log(brandData);
			var brandList = [];
			$(brandData).each(function (i,e) {
				var brand = {id:e.id,text:e.text}
				brandList.push(brand)
			})
			let brandIds = JSON.stringify(brandList);

			var specificationData = $("#specification").select2("data")
			var specificationList = [];
			$(specificationData).each(function (i,e) {
				var specification = {id:e.id,text:e.text}
				specificationList.push(specification)
			})
			let specIds = JSON.stringify(specificationList);

			let customAttributeItem = [];
			const trs = $("#customAttributeItemsTbody tr")
			for(let i=0; i<trs.length; i++){
				const tds = $(trs[i]).find("td");
				const text = $(tds[1]).find("input").val();
				const custom = {"text":text};
				customAttributeItem.push(custom);//对象js 对象 java不好接受，把对象转成json字符串，后台java转成list集合
			}
			var customAttributeItems = JSON.stringify(customAttributeItem);
			var name = $("#name").val();
			$.post("/typeTemplate/insertTypeTemplate",{name:name,brandIds:brandIds,specIds:specIds,customAttributeItems:customAttributeItems},function (result) {
				window.location.reload()
			})
		}
	</script>
	<script>
		//修改回显
		function toUpdateTypeTemplate(id) {
			$.post("/typeTemplate/getTypeTemplate",{id:id},function (result) {
				if (result.code==200){
					$('#updateSpecification').select2('data', null);
					$('#updateBrand').select2('data', null);
					let str ='';
					str+='<td>商品类型</td>'
					str+='  <td><input  class="form-control" placeholder="商品类型" id="updateId" name="updateId" value="'+result.info.name+'"></td>'
					$("#nameEcho").html(str)

					let str1='';
					var customAttributeItems = JSON.parse(result.info.customAttributeItems);
					$(customAttributeItems).each(function (i,e) {
						str1+=' <tr>'
						str1+='<td><input type="checkbox" class="icheckbox_square-blue" ></td>'
						str1+=' <td><input class="form-control" placeholder="属性名称" value="'+e.text+'"></td>'
						str1+=' <td><button type="button" class="btn btn-default" title="删除" onclick="updateDeleteNode(this)"><i class="fa fa-trash-o"></i> 删除</button></td>'
						str1+='</tr>'
					})
					$("#updateCustomAttributeItemsTbody").html(str1)
					var specIds = JSON.parse(result.info.specIds);
					$.each(specIds, function (index, value) {
						$('#updateSpecification').append(new Option(value.text, value.id, false, true));
					});
					$('#updateSpecification').trigger("change");

					var specIds = JSON.parse(result.info.specIds);
					$.each(specIds, function (index, value) {
						$('#updateBrand').append(new Option(value.text, value.id, false, true));
					});
					$('#updateBrand').trigger("change");
				}
			})
		}
		//修改方法
		function updateTypeTemplate() {
			var brandData = $("#updateBrand").select2("data")
			console.log(brandData);
			var brandList = [];
			$(brandData).each(function (i,e) {
				var brand = {id:e.id,text:e.text}
				brandList.push(brand)
			})
			let brandIds = JSON.stringify(brandList);

			var specificationData = $("#updateSpecification").select2("data")
			var specificationList = [];
			$(specificationData).each(function (i,e) {
				var specification = {id:e.id,text:e.text}
				specificationList.push(specification)
			})
			let specIds = JSON.stringify(specificationList);

			let customAttributeItem = [];
			const trs = $("#updateCustomAttributeItemsTbody tr")
			for(let i=0; i<trs.length; i++){
				const tds = $(trs[i]).find("td");
				const text = $(tds[1]).find("input").val();
				const custom = {"text":text};
				customAttributeItem.push(custom);//对象js 对象 java不好接受，把对象转成json字符串，后台java转成list集合
			}
			var customAttributeItems = JSON.stringify(customAttributeItem);
			var name = $("#updateName").val();
			$.post("/typeTemplate/updateTypeTemplate",{name:name,brandIds:brandIds,specIds:specIds,customAttributeItems:customAttributeItems},function (result) {
				window.location.reload()
			})
		}

		//删除方法
		function deleteBrand() {
			var rows = $("input[name='ids']:checked")
			var ids = [];
			$(rows).each(function (i,e) {
				if (this.checked){
					ids.push($(e).val())
				}
			})
			if(ids.length <= 0){
				alert("请选择")
				return;
			}
			$.post("/typeTemplate/deleteTypeTemplateBatch",{ids:ids},function (result) {
				window.location.reload()
			})
			console.log(ids)
		}
	</script>
</html>